<template>
	<view>
		<!-- 分享 -->
		<view class="popup-box">
			<view class="cu-modal" :class="{ show: showShareModal }" @tap="hideShareModal">
				<view class="cu-dialog" style="width: 610rpx;background: none;" @tap.stop>
					<view class="img-box">
						<image class="modal-img" src="/static/images/share.png" mode="aspectFit"></image>
						<view class="qrcode">
							<canvas canvas-id="qrcode" style="width:180px;height:180px;" />
						</view>
					</view>
					<view>
						<button class="u-reset-button share-btn" @tap="showTools">分享好友</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分享tools -->
		<view class="cu-modal bottom-modal" :class="{ show: showShare }" @tap="showShare = false">
			<view class="cu-dialog safe-area-inset-bottom" style="border-radius: 20rpx 20rpx 0 0;background: none;">
				<view class="share-box">
					<view class="share-list-box u-flex">
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-item share-btn u-flex-col u-col-center" open-type="share">
							<image class="share-img" :src="$IMG_URL + '/imgs/share/share_wx.png'" mode=""></image>
							<text class="share-title">微信好友</text>
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN  -->
						<view v-if="platform !== 'H5'" class="share-item u-flex-col u-col-center" @tap="shareFriend">
							<image class="share-img" :src="$IMG_URL + '/imgs/share/share_wx.png'" mode=""></image>
							<text class="share-title">微信好友</text>
						</view>
						<!-- #endif -->
						<!-- <view class="share-item u-flex-col u-col-center" @tap="onPoster">
							<image class="share-img" :src="$IMG_URL + '/imgs/share/share_poster.png'" mode=""></image>
							<text class="share-title">生成海报</text>
						</view> -->
		
						<view class="share-item u-flex-col u-col-center" @tap="copySharePath">
							<image class="share-img" :src="$IMG_URL + '/imgs/share/share_link.png'" mode=""></image>
							<text class="share-title">复制链接</text>
						</view>
					</view>
					<view class="share-foot u-flex u-row-center u-col-center" @tap="showShare = false">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uQRCode from '@/common/uqrcode.js';
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			showShareModal: false,
			showShare: false,
			qrcodeText: 'http://www.baidu.com',
			// 二维码尺寸
			qrcodeSize: 180,
			// 最终生成的二维码图片
			qrcodeSrc: '',
			platform: this.$platform.get(),
		};
	},
	methods: {
		onShare() {
			uni.showLoading({
				title: '二维码生成中',
				mask: true
			});
			uQRCode.make({
				canvasId: 'qrcode',
				text: this.qrcodeText,
				size: this.qrcodeSize,
				margin: 10,
				success: res => {
					this.qrcodeSrc = res
					console.log('qrcodeSrc = ' + this.qrcodeSrc);
				},
				complete: () => {
					uni.hideLoading()
				}
			})
			
			this.showShareModal = true;
			uni.hideTabBar();
		},
		hideShareModal(){
			this.showShareModal = false;
			uni.showTabBar();
		},
		showTools(){
			this.showShareModal = false;
			this.showShare = true;
		},
		// 分享好友
		shareFriend() {
			let that = this;
			// #ifdef APP-PLUS
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: that.shareInfo.path,
				title: that.shareInfo.title,
				summary: that.shareInfo.title,
				image: that.shareInfo.image,
				success: res => {
					console.log('success:' + JSON.stringify(res));
					this.showShare = false;
				},
				fail: err => {
					console.log('fail:' + JSON.stringify(err));
				}
			});
			// #endif
			// #ifdef H5
			this.showShare = false;
			this.showShareGuide = true;
			// #endif
		},
		// 复制链接
		copySharePath() {
			let that = this;
			uni.setClipboardData({
				data: that.qrcodeText,
				success: data => {
					that.$u.toast('已复制到剪切板');
					that.showShare = false;
					uni.showTabBar();
				}
			});
		},
	}
};
</script>

<style lang="scss">
.img-box {
	position: relative;
	width: 600rpx;
	height: 600rpx;
	margin: auto;
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #E77817;
	.modal-img {
		width: 100%;
		will-change: transform;
		height: 600rpx;
	}
	.qrcode {
		position:absolute;
		top: 80rpx;
		left: 120rpx;
		width: 360rpx;
		height: 360rpx;
	}
}
.share-btn {
	width: 540rpx;
	height: 80rpx;
	line-height: 80rpx;
	color:#fff;
	margin: 60rpx auto 0;
	border-radius: 40rpx;
	background-color: #E77817;
}

// 分享tool
.share-box {
	background: #fff;
	width: 750rpx;
	border-radius: 30rpx 30rpx 0 0;
	padding-top: 30rpx;
	position: relative;

	.share-foot {
		font-size: 24rpx;
		color: #bfbfbf;
		height: 80rpx;
		border-top: 1rpx solid #eee;
	}

	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
